<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直对齐属性</title>
		<style>
			/* 所有图片变小 */
			p img{
				bor der: 1px solid red;
				width: 100px;
				height: 100px;
			}
			p img.baseline{
				bor der: 1px solid red;
				veitical-align: baseline;/* 默认 */
			}
			p img.middle{
				vertical-align: middle;
			}
			p img.bottom{
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<!-- 表格常用属性：vertical-align 对齐4种 
		     与行内/行快元素共用：文本与图片对其模式
		-->
		<p><img src="img/1.png" alt="太乙" class="baseline"/>基线对齐</p>
		<p><img src="img/2.png" alt="哪吒1" class="top"/>顶部对齐</p>
		<p><img src="img/3.png" alt="哪吒2" class="middle"/>居中对齐</p>
		<p><img src="img/4.png" alt="申公豹" class="bottom"/>底部对齐</p>
	</body>
</html>